<script setup>
import {storeToRefs} from "pinia";
import useCounterStore from "@/stores/counter.js";
import {useRouter} from "vue-router";

let {foodList} = storeToRefs(useCounterStore());
let router = useRouter();

const onClickLeft = () => {
  router.push({
    path: '/my',
  })
};

const jump = (index) => {
  router.push({
    path: '/storedetails',
    query: {
      index: index
    }
  })
}
console.log(foodList.value[0].order[0].star)
</script>

<template>
  <div class="mystarlacarte">
    <div class="header">
      <van-nav-bar
          title="我收藏的菜品"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
      />
    </div>
    <div class="show" v-for="(item,index) in foodList">

      <div class="show-item" v-for="(item1,index1) in item.order">
        <div class="content" v-if="item1.star==='已收藏'" @click="jump(index)">
<!--          <div class="sj">-->
<!--            <span class="span1">商家:{{ item.name }}</span>-->
<!--          </div>-->
          <div class="img">
            <img :src="item1.src">
          </div>
          <div class="text">
            <h3>菜名:{{ item1.name }}</h3>
            <div class="price">
              <span class="span1">价格: ¥{{ item1.price }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped>
.show .show-item .content {
  display: flex;
  align-items: center;
}

.show .show-item .content .img {
  width: 30%;
  padding: 30px;
}

.show .show-item .content .img img {
  width: 100%;
}

.show .show-item .content .text {
  position: absolute;
  right: 50px;
}

.show .show-item .content .text .price {
  color: red;
}
</style>